<template>
    <div>
        <el-dialog title="分配角色" :visible.sync="rolesInfo.isRolesShow">
            <el-form :model="rolesRow">
                <el-form-item label="当前用户信息">
                    <span>{{ rolesRow.username }}</span>
                </el-form-item>
                <el-form-item label="当前的角色">
                    <span>{{ rolesRow.role_name }}</span>
                </el-form-item>
                <el-form-item label="分配新角色">
                    <el-select v-model="rolesRow.newRole" placeholder="请选择" @focus="getRoles">
                        <el-option :label="item.roleName" :value="item.roleName" v-for="item in rolesList"
                            :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="rolesInfo.isRolesShow = false">取 消</el-button>
                <el-button type="primary" @click="queryBtn">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getRolesList } from '@/api/roles';
import { AssignUserRoles } from '@/api/user';

export default {
    name: "rolesIndex",
    props: {
        rolesInfo: {
            type: Object
        },
        rolesRow: {
            type: Object
        }
    },
    data() {
        return {
            rolesList: [],

        };
    },

    methods: {
        // 获取角色列表
        async getRoles() {
            let res = await getRolesList()
            this.rolesList = res
        },
        // 点击确认按钮
        async queryBtn() {
            try {
                await AssignUserRoles(this.rolesInfo)
                this.$emit('colesBtn')
                this.$message.success('分配用户角色成功')
            } catch (error) {
                this.$message.error('分配用户角色失败')
            }
        }
    }
}
</script>

<style lang="scss" scoped>

</style>